import React,{PureComponent} from 'react'
import {View,Image,StyleSheet,TouchableOpacity,Text,Dimensions,Button,Platform,FlatList} from 'react-native'
import UseCouponDialog from '../../widget/dialog/UseCouponDialog'
import api from "../../api/api";
import method from "../../api/method";
import {fetchGetRequest} from "../../api/NetworkTool";

const {width} = Dimensions.get('window')

type Props = {
    course:Object,
    callBack:Function,

    cancelPress:Function,

}

export default class OrderInfoView extends PureComponent<Props>{
    constructor(props){
        super(props)
        this.state = {
            payShow:false,
            coupon_title:'请选择优惠券',
            data:[],
            distinct:'',
        }
        this.couponId = -1
    }
    render(){
        const {course} = this.props
        let start_time = course.start_date.substr(5,5).replace('-','月')+'日'
        let end_time = course.end_date.substr(5,5).replace('-','月')+'日'
        let mas_ta = course.teacher[0]
        let tou_ta = course.teacher[1]

        return (
            <View style={{backgroundColor:'white',flex:1}}>
               <Text style={styles.big_title}>订单信息</Text>
                <View style={{marginLeft:20,marginRight:20}}>
                    <View style={{flexDirection:'row',backgroundColor:'white',marginTop:10}}>
                        <Text numberOfLines={1} style={styles.title}>{course.title}</Text>
                    </View>
                    <View style={{flexDirection:'row',backgroundColor:'white',marginTop:10,alignItems:'center',}}>
                        <Image style={{width:12,height:12}} source={require('../../../res/img/select/select_time.png')}/>
                        <Text style={[styles.time,{marginLeft:7}]}>{start_time+'到'+end_time+course.frequency+course.start_time+'-'+course.end_time}</Text>
                    </View>
                    <View style={{flexDirection:'row',backgroundColor:'white',marginTop:8,alignItems:'flex-end',}}>
                        <View style={{flexDirection:'row',alignItems:'center',}}>
                            <Image style={{width:28,height:28,borderRadius:14}} source={{uri:mas_ta.image}}/>
                            <View style={{marginLeft:10,justifyContent:'center',height:28}}>
                                <Text style={styles.teacher}>讲师</Text>
                                <Text style={styles.teacher_show}>{mas_ta.realname}</Text>
                            </View>
                        </View>
                        <View style={{flexDirection:'row',alignItems:'center',marginLeft:30}}>
                            <Image style={{width:28,height:28,borderRadius:14}} source={{uri:tou_ta.image}}/>
                            <View style={{marginLeft:10,justifyContent:'center',height:28}}>
                                <Text style={styles.teacher}>辅导</Text>
                                <Text style={styles.teacher_show}>{tou_ta.realname}</Text>
                            </View>
                        </View>
                        <View style={{flex:1}}/>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                            <Image style={{width:7,height:8,marginTop:7}} source={require('../../../res/img/select/select_price.png')}/>
                            <Text style={styles.price}>{course.price}</Text>
                        </View>
                    </View>
                    <TouchableOpacity style={{marginTop:10,flex:1,height:24,width:width}} onPress={()=>{
                        this.getCouponData()
                    }}>
                        <Image style={{width:(width-40),height:24 ,position:'absolute'}} source={require('../../../res/img/detail/order_course_bg.png')}/>
                        <View style={{marginTop:9, flexDirection:'row',paddingLeft:8}}>
                            <Text style={{color:'#DB3843', fontSize:10,marginTop:1}}>{this.state.coupon_title}</Text>
                            <Text style={{color:'#333333', fontSize:10,marginLeft:8}}>{this.state.distinct}</Text>
                        </View>
                    </TouchableOpacity>
                </View>
                <View style={{flexDirection:'row',backgroundColor:'rgba(0,0,0,0.1)',width:(width),height:1,marginTop:15}}/>
                <UseCouponDialog data={this.state.data} show={this.state.payShow} closeModal={(show)=>{
                    this.setState({payShow:show})
                }} callBack={(info)=>{
                    let distinct = '此券可用，去结算立减'+info.price+'元'
                    this.setState({coupon_title:info.title,distinct:distinct})
                    this.couponId = info.id
                    this.props.callBack(info)
                }} cancelPress={()=>{
                    this.setState({coupon_title:'请选择优惠券',distinct:''})
                    this.couponId = -1
                    this.props.cancelPress()
                }}/>
            </View>
        )
    }
    mapdata(res){
        let dataList = res.coupon.map((info) => {
            return {
                id: info.id,
                title: info.title,
                count: info.count,
                price: info.price,
                status: info.status,
                start_datetime: info.start_datetime,
                end_datetime: info.end_datetime,
                coupon_sn: info.coupon_sn,
            }
        })


        return dataList
    }

    getCouponData() {

        this.setState({payShow:true})

        const {course} = this.props

        let params = {
            course:course.id,
        }
        fetchGetRequest(api.coupon_find, method.get, params)
            .then(res => {
                let dataList = this.mapdata(res)
                let data = []
                dataList.forEach(info=>{
                    if (info.id !== this.couponId) {
                        data.push(info)
                    }
                })
                this.setState({data:data})
                if (dataList.length <= 0){
                    this.setState({coupon_title:'请选择优惠券',distinct:''})
                }
            })
            .catch(err => {
            })
    }

    componentDidMount() {
        const {course} = this.props

        let params = {
            course:course.id,
        }
        fetchGetRequest(api.coupon_find,method.get,params)
            .then(res=>{
                let dataList = this.mapdata(res)
                this.setState({data:dataList})
                if (dataList.length <= 0){
                    this.setState({coupon_title:'请选择优惠券',distinct:''})
                }
            })
            .catch(err=>{})
    }
}
const styles = StyleSheet.create({
    big_title : {
      fontWeight:'bold',
      fontSize:16,
      color:'black',
        marginTop:15,
        marginLeft:12,
    },
    title_show:{
      color:'rgba(0,0,0,0.5)',
        fontWeight:'200',
        fontSize:12,
        width:64,
    },
    title_data:{
        color:'black',
        fontSize:13,
        marginLeft:15,
    },
    title_view:{
        flexDirection:'row',
        backgroundColor:'white',
        marginBottom:10,
        alignItems:'center',
        marginLeft:20,
    },
    title:{
        fontWeight:'bold',
        color:'rgba(0,0,0,0.8)',
        fontSize:16,
        width:(width -40),
    },
    time:{
        fontSize:12,
        color:'#999999',
        fontWeight:'200',
    },
    teacher:{
        fontSize:9,
        color:'#333333',
    },
    teacher_show:{
        fontSize:9,
        color:'#999999',
        marginTop:4,
    },
    price:{
        color:'rgba(197, 50, 60, 1)',
        fontSize:19,
        fontWeight:'700',
        marginLeft:6,
    }

})